<template>
<div class="homemian">
    <!-- 轮播图 -->
    <div class="banner">
        <img class="logo" src="../../assets/img/home/bannerLogo.png" />
        <h1>{{$t('home[0]')}}</h1>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in IMGS" :key="index">
                    <img :src="item.image" @click="href(item)" />
                </div>
            </div>
        </div>
        <div class="leftSwitch" @click="slidePrev"></div>
        <div class="rightSwitch" @click="slideNext"></div>
        <div class="notice">
            <div class="content">
                <img src="../../assets/img/home/gg-icon.png" />
                <router-link class="title" tag="div" :to="{name:'systemannouncementdetails',query:{id: newdata.posts_id}}">{{newdata.title}}</router-link>
                <router-link to="/newsflash" class="more" tag="div">{{$t('home[1]')}} &gt;</router-link>
            </div>
        </div>
    </div>

    <!-- 交易行情 -->
    <section class="two">
        <ul class="twomain">
            <li class="list" :class="Number(item.change)<0?'red':'green'" v-for="(item, index) in symbolList" v-if="index < 5" :key="index">
                <router-link :to="{path:'/transaction',query:{code:item.code}}">
                    <div class="listheader">
                        <p class="name">{{item.name.toUpperCase()}}</p>
                        <p class="changeRate" :class="{'risebackground':item.change < 0, 'fallbackground': item.change > 0}">{{item.changeRate}}</p>
                    </div>
                    <div class="bot">
                        <p class="price" :class="{'rise':item.change < 0, 'fall': item.change > 0}">{{$public.toLowFixed(item.price,item.code)}}</p>
                        <p class="cnprice">≈{{$public.toLowFixed(item.cnyPrice, item.code, 2)}} CNY</p>
                    </div>
                </router-link>
            </li>
        </ul>
    </section>
    
    <!-- 千万人的选择，可信赖的平台 -->
    <div class="main1">
        <div class="title">{{$t('home[2]')}}</div>
        <div class="list">
            <div class="item">
                <img src="../../assets/img/home/yh.png" />
                <div class="itemTit">{{$t('home[3]')}}</div>
                <div class="text">{{$t('home[4]')}}</div>
            </div>
            <div class="item">
                <img src="../../assets/img/home/cx.png" />
                <div class="itemTit">{{$t('home[5]')}}</div>
                <div class="text">{{$t('home[6]')}}</div>
            </div>
            <div class="item">
                <img src="../../assets/img/home/qq.png" />
                <div class="itemTit">{{$t('home[7]')}}</div>
                <div class="text">{{$t('home[8]')}}</div>
            </div>
        </div>
    </div>
    <!-- PPEX平台APP -->
    <div class="main2">
        <div class="leftImg">
            <img src="../../assets/img/home/appImg.png" />
        </div>
        <div class="download">
            <div class="tip">{{$t('home[9]')}}</div>
            <div class="title">{{$t('home[10]')}}</div>
            <div class="iconlist">
                <div class="item">
                    <img src="../../assets/img/home/zsjy-icon.png" />
                    <span>{{$t('home[11]')}}</span>
                </div>
                <div class="item">
                    <img src="../../assets/img/home/sshq-icon.png" />
                    <div>{{$t('home[12]')}}</div>
                </div>
                <div class="item">
                    <img src="../../assets/img/home/yzty-icon.png" />
                    <div>{{$t('home[13]')}}</div>
                </div>
                <div class="item">
                    <img src="../../assets/img/home/jsct-icon.png" />
                    <div>{{$t('home[14]')}}</div>
                </div>
            </div>
            <div class="app">
                <div class="btn">
                    <div class="ios" @click="download">
                        <img src="../../assets/img/home/ios.png" />
                        <span>iPhone</span>
                    </div>
                    <div class="android" @click="download">
                        <img src="../../assets/img/home/android.png" />
                        <span>Android</span>
                    </div>
                </div>
                <div class="qrcode">
                    <div id="qrcode"></div>
                    <div class="text">{{$t('home[15]')}}</div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
    slides,
    systemPosts,
    content
} from "@/api/software";

import socket from '@/api/server/socket';
import {
    getPro,
    getProSymbol
} from "@/api/quotation";

import {
    codelist,
    contractws,
    getToken
} from "@/libs/util";

import QRCode from "qrcodejs2";

import Swiper from "swiper";

export default {
    name: "home",
    data() {
        return {
            symbolList: [], // 行情列表
            newdata: [],
            Token: false,
            IMGS: [],
            swiper: null,
            ws : null
        };
    },
    methods: {

        href(type) {
            window.open(type.href)
        },

        getdata() {
            //获取轮播图 
            slides({
                type: "2",
            }).then(res => {
                this.IMGS = res;
                this.$nextTick(() => {
                    this.swiper = new Swiper(".swiper-container", {
                        slidesPerView: 3,
                        spaceBetween: 1,
                        loop: true,
                        autoplay: true,
                    });
                });

            }).catch((err) => {

            }); //轮播图

            getProSymbol({
                is_homepage: 1
            }).then(res => {

                this.symbolList = res;
                codelist(res);

                this.ws = new socket(this.$server.PATH.WS);
                this.ws.on("open", evt => {
                    this.ws.send({
                        sub: "ticker@" + getToken("codeList"),
                    });
                });

                this.ws.on("message", data => {

                    let key = this.symbolList.findIndex(item => item.code == data.code);
                    // this.symbolList[key] = data;
                    this.$set(this.symbolList, key, data);

                })

            }).catch((err) => {}); //行情

            systemPosts({
                type: "2",
            }).then(res => {
                if (res.data.length > 0) {
                    this.newdata = res.data[0];
                }
            }).catch((err) => {}); //公告
        },

        download() {
            window.open(this.$store.state.app.software_link);
        },

        qrcode() {
            let that = this;
            let qrcode = new QRCode("qrcode", {
                width: 106,
                height: 105, // 高度
                text: that.$store.state.app.software_link, // 二维码内容
                render: "canvas", // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
                background: "#f0f", // 背景色
                foreground: "#ff0", // 前景色
            });
        },
        slidePrev() {
            this.swiper.slidePrev();
        },
        slideNext() {
            this.swiper.slideNext();
        },
    },
    beforeRouteLeave: function (to, from, next) {
        // debugger
        // let wsdata = {
        //     unsub: "ticker@" + getToken("codeList"),
        // };
        // contractws(wsdata, "unsub");
        
        this.ws.doClose();
        next();
    },
    // beforeEach: function (to, from, next) {
    //     debugger
    //     // let wsdata = {
    //     //     unsub: "ticker@" + getToken("codeList"),
    //     // };
    //     // contractws(wsdata, "unsub");
    //     // next();
    //     // this.ws.destroy();
    // },
    mounted() {
        setTimeout(() => {
            this.qrcode();
        }, 1500);
    },
    created() {
        this.getdata();
        if (!getToken("token")) {
            this.Token = true;
        }
    },
 
};
</script>
